<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>


    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=chrome">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>axios+vue</title>
    <link rel="stylesheet" type="text/css" href="../css/home.css">
    <!-- 引入图标 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

</head>

<body>
    <div class="wrap" id="app">
        <!-- 搜索框 -->
        <div class="search_form">
            <!-- logo -->
            <div class="logo"></div>
            <div class="form_group">
                <!-- 搜索框 -->
                <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" id="inp" placeholder="搜索市、区、县等" />
                <button class="input_sub" @click="searchWeather">
                    <i class="fa fa-search"></i>
                </button>
                <!-- 热门城市选项 -->
                <div class="hotkey" id="hotcity">
                    <span class="hot_city">热门城市</span>
                    <a href="javascript:;" @click="changeCity('北京')" id="acity">北京</a>
                    <a href="javascript:;" @click="changeCity('上海')" id="acity">上海</a>
                    <a href="javascript:;" @click="changeCity('广州')" id="acity">广州</a>
                    <a href="javascript:;" @click="changeCity('深圳')" id="acity">深圳</a>
                </div>
            </div>
        </div>
        <!-- 上半部分 -->
        <div class="container">
            <div class="dont"></div>
            <div class="wd_weather">
                <p class="wd">{{NowweatherList.temp}}℃</p>
                <p class="weather">{{NowweatherList.text}}</p>
                <!-- 天气预警 -->
                <div class="warning" v-show="isWarning">
                    {{warningTitleName}}预警
                    <div class="warning_content">
                        <div class="warning_title">{{warningTitle}}</div>
                        <div class="warning_text"> {{warningText}}</div>
                    </div>
                </div>
                <!-- <div class="airtip">
                    空气质量
                    <div class="airtip_content">
                        {{NowweatherList.air_tips}}
                    </div>
                </div> -->

                <div class="pic"><img :src="getimgSrc()" /></div>
            </div>
            <div class="other">
                <p class="wind"><img src="../pic/wind.png" width="24px" height="24px">风级：{{NowweatherList.windScale}}级</p>
                <p class="water"><img src="../pic/water.png" width="24px" height="24px">湿度：{{NowweatherList.humidity}}</p>
                <p class="pa"><img src="../pic/pa.png" width="24px" height="24px">气压：{{NowweatherList.pressure}}hPa</p>
            </div>
            <div class="tips"></div>
            <!-- <div class="pic"><img :src="getimgSrc()" /></div> -->
        </div>
        <!-- 每小时卡片 -->
        <div class="time_card">

            <span class="title_text">逐小时预报</span>
            <a class="link_a" href="http://www.weather.com.cn/" target="_blank">数据来源于中国天气网</a>
            <div class="page">
                <img class="btn-pre" src="../pic/pre_a.png" id="btn-preid">
                <img class="btn-next" src="../pic/next_a.png" id="btn-nextid">
            </div>

            <div class="time_day">
                <ul class="time_list" v-for="(item,key) in hours">
                    <li class="item_list">
                        <p class="txt_time">{{gettimehours(key)}}</p>
                        <img :src="getimgSrcHours(item.icon)">
                        <p>{{item.temp}}℃</p>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 下半部分内容 -->
        <div class="un_container">
            <!-- 7天预报 -->
            <div class="sevenday">
                <a id="link-15" href="http://www.weather.com.cn/" target="_blank">15日天气预报</a>
                <h2 class="title">7日天气预报</h2>
                <div class="se-weather">
                    <ul class="ls-seweather" v-for="(detailwe,key) in Detailwe" id="seven_ul">
                        <li id="li_seven" :class="[key==0?first:itemi]">
                            <p class="day">{{detailwe.fxDate}}</p>
                            <p class="date" id="week">{{gettimeweek(key)}}</p>
                            <div class="day-weather">
                                <p class="weather_p">{{detailwe.tempMax}}℃</p>
                                <img :src="getimgSrcHours(detailwe.iconDay)" class="daypic">
                            </div>
                            <div class="night-weather">
                                <img class="daypic" :src="getimgSrcHours(detailwe.iconNight)">
                                <p class="weather_p">{{detailwe.tempMin}}℃</p>
                            </div>
                            <p class="windi"> {{detailwe.windDirNight}}：{{detailwe.windSpeedNight}}级</p>
                        </li>
                        <!-- <li class="itemi ">
                            <p class="day">今天</p>
                            <p class="date">08月08日</p>
                            <div class="day-weather">
                                <p class="weather_p">大雨</p>
                                <img src="../pic/sun.png" class="daypic">
                            </div>
                            <div class="night-weather">
                                <img class="daypic" src="../pic/sun.png">
                                <p class="weather_p">阴</p>
                            </div>
                            <p class="windi">微风 3级</p>
                        </li>
                        <li class="itemi ">
                            <p class="day">今天</p>
                            <p class="date">08月08日</p>
                            <div class="day-weather">
                                <p class="weather_p">大雨</p>
                                <img src="../pic/sun.png" class="daypic">
                            </div>
                            <div class="night-weather">
                                <img class="daypic" src="../pic/sun.png">
                                <p class="weather_p">阴</p>
                            </div>
                            <p class="windi">微风 3级</p>
                        </li>
                        <li class="itemi ">
                            <p class="day">今天</p>
                            <p class="date">08月08日</p>
                            <div class="day-weather">
                                <p class="weather_p">大雨</p>
                                <img src="../pic/sun.png" class="daypic">
                            </div>
                            <div class="night-weather">
                                <img class="daypic" src="../pic/sun.png">
                                <p class="weather_p">阴</p>
                            </div>
                            <p class="windi">微风 3级</p>
                        </li>
                        <li class="itemi ">
                            <p class="day">今天</p>
                            <p class="date">08月08日</p>
                            <div class="day-weather">
                                <p class="weather_p">大雨</p>
                                <img src="../pic/sun.png" class="daypic">
                            </div>
                            <div class="night-weather">
                                <img class="daypic" src="../pic/sun.png">
                                <p class="weather_p">阴</p>
                            </div>
                            <p class="windi">微风 3级</p>
                        </li>
                        <li class="itemi ">
                            <p class="day">今天</p>
                            <p class="date">08月08日</p>
                            <div class="day-weather">
                                <p class="weather_p">大雨</p>
                                <img src="../pic/sun.png" class="daypic">
                            </div>
                            <div class="night-weather">
                                <img class="daypic" src="../pic/sun.png">
                                <p class="weather_p">阴</p>
                            </div>
                            <p class="windi">微风 3级</p>
                        </li>
                        <li class="itemi ">
                            <p class="day">今天</p>
                            <p class="date">08月08日</p>
                            <div class="day-weather">
                                <p class="weather_p">大雨</p>
                                <img src="../pic/sun.png" class="daypic">
                            </div>
                            <div class="night-weather">
                                <img class="daypic" src="../pic/sun.png">
                                <p class="weather_p">阴</p>
                            </div>
                            <p class="windi">微风 3级</p>
                        </li> -->
                    </ul>
                    <!-- 插入折线图 -->
                    <div id="wenduChart"></div>
                </div>
            </div>
            <!-- 生活指数 -->
            <div class="livenum">
                <h2 class="title">生活指数</h2>
                <div class="in-live">
                    <div class="in-content">
                        <ul class="ls-live" v-for="(tip,key) in tips">
                            <li v-bind:class="{ 'item': isActivei, 'one': isActive }">
                                <div class="liveout">
                                    <img :src="arraypic[key]" class="innerpic">

                                    <p>{{tip.name}}:{{tip.level}}</p>
                                </div>
                                <div class="liveinner">
                                    <div class="live_detail">
                                        {{tip.text}}
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <!-- 湿度图形 -->
        <div class="hum-container">
            <span>相对湿度</span>
            <div id="humwea"></div>
        </div>

        <!-- 空气质量图形 -->
        <div class="aircontainer">
            <span class="spancon">城市空气质量</span>
            <div id="aircondi"> </div>
            <div class="iconair">
                <div class="iconin">
                    <!-- 图标的排列 -->
                    <ul>
                        <li class="aqi-1">

                            <i class="fa fa-circle" style="color:#95b359 ;"></i>
                            <span>优</span>
                        </li>
                        <li class="aqi-2">
                            <i class="fa fa-circle" style="color:#d3cf63 ;"></i>
                            <span>良</span>
                        </li>
                        <li class="aqi-3">
                            <i class="fa fa-circle" style="color:#e0991d ;"></i>
                            <span>轻度</span>
                        </li>
                        <li class="aqi-4">
                            <i class="fa fa-circle" style="color:#d96161 ;"></i>
                            <span>中度</span>
                        </li>
                        <li class="aqi-5">
                            <i class="fa fa-circle" style="color:#a257d0 ;"></i>
                            <span>重度</span>
                        </li>
                        <li class="aqi-6">
                            <i class="fa fa-circle" style="color:#d94371 ;"></i>
                            <span>严重</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

</body>
<script src="../js/jquery.js"></script>
<script src="../js/echarts.js"></script>

<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-liquidfill.js"></script>
<script src="../js/echarts-liquidfill.min.js"></script>

<!-- <script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="../js/china.js"></script>
<script src="../js/min.js"></script>

</html>